<template>
    <div class="Block" :class="{ 'HasAni': data.isLink }" @mouseenter="Play">
        <environment-outlined v-if="data.isLink" class="Icon" ref="icon" />
    </div>
</template>
<script setup>
import { EnvironmentOutlined } from '@ant-design/icons-vue'
import anime from 'animejs'
import { onMounted, onUnmounted, ref } from 'vue';
const props = defineProps({
    data: Object
})
const icon = ref();
let AniObj = null;

onMounted(() => {
    // 创建一个动画（其实也可以中关键帧实现，原理是一样的）
    AniObj = anime({
        targets: icon.value,
        keyframes: [
            { rotateY: 0 },
            { translateY: -15, rotateY: 180 },
            { translateY: 0, rotateY: 360 },
        ],
        easing: 'linear',
        // 持续时间
        duration: 1000,
        autoplay: false,
    })
})

// 鼠标进入时，中心播放动画
// 用 CSS 实现时，就是删除动画的 Class，间隔 1毫秒， 再添加这个Class就可以了
const Play = () => {
    AniObj.restart();
}

onUnmounted(() => {
    // 目前 Anime 没有释放缓存的办法，
    // 只能停止动画
    AniObj.pause();
})
</script>
<style lang="less" scoped>
.Block {
    width: 100px;
    height: 100px;
    float: left;
    background-color: rgba(127, 255, 212, 0.1);
    text-align: center;
    line-height: 85px;
    position: relative;
}

.HasAni {
    transition: box-shadow 0.3s, background-color 0.2s;
}

.HasAni:hover {
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.3);
    background-color: rgba(127, 255, 212, 0.2);
}

.Icon {
    position: relative;
    z-index: 2;
    font-size: 25px;
    color: rgb(27, 141, 216);
    transform: translateY(0px) rotateY(0deg);
}
</style>